<template>
	<div class="h-percent100">
		<ul class="fish-bone-box">
			<li class="fish-bone-item" v-for="(baseItem ,baseIndex) in baseList">
				<!--上-->
				<div class="thorn-box" style="align-items: flex-start;">
					<div
						v-for="(item, index) in baseItem.list"
						v-if="index % 2 === 0"
						class="thorn-content"
					>
						<dl class="thorn-title" :class="{'isWarning':isWarning(item.task_list)}">
							<dt class="line-1" :title="item.work_name">{{item.work_name}}</dt>
							<dd>开始时间：{{item.work_time_start}}</dd>
							<dd>完成时间：{{item.work_time_end}}</dd>
							<el-image class="guide-top" :src="guidline" :fit="fit" />
						</dl>
						<ul class="thorn-details">
							<li class="thorn-details-item" v-for="(innerItem, innerIndex) in item.task_list"
							    @click="handleLookTaskDetails(innerItem, innerIndex)">
								<div
									class="thorn-details-item-circ"
									:style="{'background-color': transformColor(innerItem.this_task_go_types)}"
								></div>
								<span class="task-text line-1" :title="innerItem.this_task_name">{{innerItem.this_task_name}}</span>
								<el-image v-if="innerItem.this_warning_type==1" title="已超时" class="icon-warning" :src="iconWarning" :fit="fit" />
								<el-tag
									class="icon-tips"
									size="mini"
									v-if="innerItem.this_max_is_replace==1 && innerItem.this_max_is_mvp!=0"
									:type="transformIsMvp(innerItem.this_max_is_mvp).type"
									:effect="transformIsMvp(innerItem.this_max_is_mvp).effect">
									{{transformIsMvp(innerItem.this_max_is_mvp).value}}
								</el-tag>
							</li>
						</ul>
					</div>
				</div>
				<!--鱼骨-->
				<ul class="bone-line" :style="{'width': mathWidth(baseItem.list.length)}">{{baseItem.name}}</ul>
				<!--下-->
				<div class="thorn-box" style="align-items: flex-end; padding-left:340px;">
					<div
						v-for="(item, index) in baseItem.list"
						v-if="index % 2 === 1"
						class="thorn-content"
					>
						<dl class="thorn-title" :class="{'isWarning':isWarning(item.task_list)}">
							<dt class="line-1" :title="item.work_name">{{item.work_name}}</dt>
							<dd>开始时间：{{item.work_time_start}}</dd>
							<dd>完成时间：{{item.work_time_end}}</dd>
							<el-image class="guide-bottom" :src="guidline" :fit="fit" />
						</dl>
						<ul class="thorn-details">
							<li class="thorn-details-item" v-for="(innerItem, innerIndex) in item.task_list"
							    @click="handleLookTaskDetails(innerItem, innerIndex)">
								<div
									class="thorn-details-item-circ"
									:style="{'background-color': transformColor(innerItem.this_task_go_types)}"
								></div>
								<span class="task-text line-1" :title="innerItem.this_task_name">{{innerItem.this_task_name}}</span>
								<el-image v-if="innerItem.this_warning_type==1" title="已超时" class="icon-warning" :src="iconWarning" :fit="fit" />
								<el-tag
									class="icon-tips"
									size="mini"
									v-if="innerItem.this_max_is_replace==1 && innerItem.this_max_is_mvp!=0"
									:type="transformIsMvp(innerItem.this_max_is_mvp).type"
									:effect="transformIsMvp(innerItem.this_max_is_mvp).effect">
									{{transformIsMvp(innerItem.this_max_is_mvp).value}}
								</el-tag>
							</li>
						</ul>
					</div>
				</div>
			</li>
		</ul>

		<w-dialog
			:visible.sync="visible"
			:append-to-body="true"
			height="auto"
			:title="'任务下要件情况：' + dialogTitle" width="1500px"
			@closed="closed"
		>


			<w-block class="r-v" title="信息上报">
				<template #list>
					<div v-if="selectedTask" class="task-box">
						<div class="flex-start">
							<div class="tip-time" v-if="selectedTask.taskStartDate">计划开始时间: {{selectedTask.taskStartDate}}</div>
							<div class="tip-time" v-if="selectedTask.taskDoneDate">计划完成时间: {{selectedTask.taskDoneDate}}</div>
						</div>
						<div class="flex-end">
							<el-button
								v-if="selectedTask.needApproved==1"
								type="default"
								@click="handleApprovalRecord">任务审批记录
							</el-button>
							<el-button
								type="primary"
								@click="handleSupervise">
								{{transformBtnTxt(selectedTask).value}}
							</el-button>
						</div>
					</div>
				</template>
				<task-item-list :showElement="showElement" />
			</w-block>


			<ul class="temp-list" v-if="warnList.length">
				<li class="mt-10" v-for="(item, i) in warnList">{{item.warn_time_plus}} {{transformWarningLevel(item.cron_type)}}</li>
			</ul>


			<template #footer>
				<div class="flex-end">
					<el-button type="primary" @click="handleCancelDialog">关 闭</el-button>
				</div>
			</template>
		</w-dialog>

		<w-dialog :visible.sync="visibleApproval" :append-to-body="true" height="auto" title="审批记录" width="1200px">
			<el-table
				ref="multipleTable"
				class="flex-1"
				:data="tableData"
				tooltip-effect="dark"
				stripe
				row-class-name="row-class-name"
				cell-class-name="cell-class-name"
				header-row-class-name="header-row-class-name"
				header-cell-class-name="header-cell-class-name"
				style="width:100%"
				height="1"
			>
				<el-table-column show-overflow-tooltip prop="sp_level_desc" label="审批层级" />
				<el-table-column show-overflow-tooltip prop="sp_person_name" label="审批人" />
				<el-table-column show-overflow-tooltip prop="sp_dept_name" label="审批人部门" />
				<el-table-column show-overflow-tooltip prop="sp_time" label="审批时间" />
				<el-table-column show-overflow-tooltip prop="sp_content" label="审批结果" />
			</el-table>
			<template #footer>
				<div class="flex-end">
					<el-button type="primary" @click="visibleApproval=false">关 闭</el-button>
				</div>
			</template>
		</w-dialog>

		<w-dialog :visible.sync="visibleSupervise" height="auto" title="督办内容录入" append-to-body>
			<el-input
				type="textarea"
				:rows="8"
				placeholder="请输入督办内容"
				v-model="superviseContent">
			</el-input>
			<template #footer>
				<div class="flex-end">
					<el-button type="default" @click="handleCancelSuperviseContent">取 消</el-button>
					<el-button type="primary" @click="handleCommitSuperviseContent">发 送</el-button>
				</div>
			</template>
		</w-dialog>

		<w-dialog :visible.sync="visibleJumpRouter" height="auto" title="跳转页面" append-to-body>
			<p v-if="selectedTask">该任务{{transformBtnTxt(selectedTask).value}}, 确定要转至督办信息查询页?</p>
			<template #footer>
				<div class="flex-end">
					<el-button type="default" @click="visibleJumpRouter=false">取 消</el-button>
					<el-button type="primary" @click="$router.push(`/supervision-information-inquiry`)">确 定</el-button>
				</div>
			</template>
		</w-dialog>
	</div>
</template>

<script>
import {mapGetters}          from 'vuex'
import TaskItemList          from '@/views/task-handle/task-item-list/index.vue'
import {itemInfo as service} from '@/services'
import guidline              from '@/assets/images/guid-top.png'
import goBottom              from '@/assets/images/go-bottom.png'
import iconWarning           from '@/assets/images/icon-warning.png'


export default {
	name      : "WFishBone",
	components: {TaskItemList},
	props     : {
		proID   : {
			type    : [String, Number],
			required: true
		},
		//立项 ,侦查设计 ,招投标 ,施工, 验收, 结算, 交付, 保修
		baseList: {
			type    : Array,
			required: true
		},
	},
	data() {
		return {
			guidline,
			goBottom,
			iconWarning,
			projectId        : this.$route.params.id,
			fit              : 'fill',
			//显示要件信息
			visible          : false,
			dialogTitle      : '',
			showElement      : {
				showImDoc                   : false, //关键要件
				showTagRiskImDoc            : true, //风险要件
				showBtnAdd                  : false,//增加按钮
				showBtnDown                 : true, //下载按钮
				showBtnDel                  : false,//删除按钮
				showBtnSubstituteDescription: false,//替换说明按钮
			},
			warnList         : [],
			//查看审批记录
			visibleApproval  : false,
			tableData        : [],
			//督办相关
			visibleSupervise : false,
			id               : undefined,//后台传的是 this_pro_task_info_id
			superviseContent : '',
			//
			visibleJumpRouter: false,
		}
	},
	computed  : {
		...mapGetters(['dictionaries', 'selectedTask']),
	},
	watch     : {},
	methods   : {
		isWarning(list) {
			return !!list.find(innerItem => {
				return (innerItem['this_max_is_replace'] == 1 && innerItem['this_max_is_mvp'] != 0) || innerItem['this_warning_type'] == 1
			})
		},
		async handleApprovalRecord() {
			this.visibleApproval = true;
			const result = await service.querySpHis_byTask({
				"rel_project_id": +this.projectId,
				"rel_task_id"   : this.selectedTask.taskPzId,
				"without_user"  : 1
			})
			if (Array.isArray(result) && result.length) {
				this.tableData = result
			}
			else {
				this.$message.warning(`没有审批记录`)
			}
		},

		handleSupervise() {
			if (!this.selectedTask) return;
			if (this.selectedTask.is_man_tip_done == '1') {
				this.visibleJumpRouter = true;
			}
			else {
				this.visibleSupervise = true;
			}
		},
		handleCancelSuperviseContent() {
			this.visibleSupervise = false;
			this.superviseContent = '';
		},
		async handleCommitSuperviseContent() {
			if (!this.id || !this.superviseContent) {
				this.$message.warning('不能为空');
				return;
			}
			this.visibleSupervise = false;
			const result = await service.insertDb_fish({
				"id"        : this.id,
				"ld_content": this.superviseContent
			})
			if (result) {
				this.id = undefined;
				this.superviseContent = '';
				this.$emit('refresh-data');
				this.$message.success('发送成功');
				this.$store.commit('setSelectedTask', {
					...this.selectedTask,
					"is_man_tip_done": "1"
				})
			}
			else {
				this.$message.warning('发送失败');
			}
		},


		transformIsMvp(key) {
			return this.dictionaries.itemImportantDocument.find(item => item.key == key)
		},
		transformBtnTxt(selectedTask) {
			if (!selectedTask) return;
			return this.dictionaries.btnTxtSupervise.find(item => {
				return item.this_warning_type == selectedTask.this_warning_type && item.is_man_tip_done == selectedTask.is_man_tip_done
			})
		},
		mathWidth(totalNum) {
			//Math.ceil(totalNum / 2)是个数一上一下, 680是item宽度, 340是为了美观多出来的部分
			return Math.ceil(totalNum / 2) * 680 + 340 + 'px';
		},
		transformColor(thisTaskGoTypes) {
			return this.dictionaries.jobState.find(item => item.key == thisTaskGoTypes).color
		},
		transformWarningLevel(key) {
			return this.dictionaries.warningLevel.find(item => item.key == key).value
		},
		async handleLookTaskDetails(innerItem, innerIndex) {
			this.visible = true;
			this.id = innerItem.this_pro_task_info_id
			this.dialogTitle = innerItem.this_task_name
			this.$store.commit('setSelectedTask', {
				...innerItem,
				isTask: "1",
				isWork: "0",
				name  : innerItem.this_task_name,
				id    : innerItem.taskPzId,
			})

			const result = await service.queryOvertimeMessageList({
				"query_all_type": '1',
				"rel_project_id": this.proID,
				"rel_task_id"   : this.selectedTask.taskPzId,
			});
			this.warnList = result.list
		},
		//关闭事件
		closed() {
			this.id = undefined;
			this.dialogTitle = '';
			this.$store.commit('setSelectedTask', null);
			this.warnList = [];
		},
		handleCancelDialog() {
			this.visible = false
		},
		getrow({row, rowIndex}) {
			// console.log(row.c05)
			let styleJson = {}
			if (row.c05 == '有') {
				styleJson = {'color': '#FD5E5E'}
			}
			else {
				styleJson = {}
			}
			return styleJson
		},
	},
	mounted() {},
	beforeDestroy() {
		this.$store.commit('setSelectedTask', null)
	}
}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/_variables.scss";

	.fish-bone-box {
		@include flex-start();
		height: 100%;

		.fish-bone-item {
			@include flex-column(center, flex-start);
			height: 100%;

			/*鱼骨*/
			.bone-line {
				height: 36px;
				line-height: 36px;
				background: linear-gradient(90deg, rgba(96, 182, 255, 0.1) 0%, #60b6ff 100%);
				opacity: 1;
				text-align: right;
				padding: 0 20px;
				color: #fff;
				font-size: 16px;
			}

			/*鱼刺*/
			.thorn-box {
				display: flex;
				justify-content: flex-start;
				height: 32%;

				.thorn-content {
					@include flex-center();
					width: 680px;
					height: 95px;
					/*background-color: #409eff;*/

					.thorn-title {
						position: relative;
						@include flex-column(flex-start, flex-start);
						padding: 10px 28px;
						width: 195px;
						height: auto;
						background: #fff;
						box-shadow: 0 0 20px #e2eaff;
						border-radius: 4px;
						text-align: left;

						&.isWarning {
							border: 1px solid #fd5e5e;
							box-shadow: 0 0 20px #fd5e5e;
						}

						dt {
							width: 100%;
							height: 30px;
							line-height: 30px;
							font-size: 16px;
							font-weight: bold;
							color: #575757;

						}

						dd {
							width: 100%;
							height: 22px;
							line-height: 22px;
							font-size: 12px;
							font-weight: 400;
							color: #919191;
						}


						@media screen and (max-width: 1366px) {
							$h: 43px;
							.guide-top {
								width: 12px;
								height: 135px;
								z-index: -1;
								position: absolute;
								margin: auto;
								left: 0;
								right: 0;
								bottom: -$h;
							}

							.guide-bottom {
								width: 12px;
								height: 135px;
								z-index: -1;
								position: absolute;
								margin: auto;
								left: 0;
								right: 0;
								top: -$h;
								transform: rotate(180deg);
							}
						}
						@media screen and (min-width: 1367px) {
							$h: 135px;
							.guide-top {
								width: 12px;
								height: 135px;
								z-index: -1;
								position: absolute;
								margin: auto;
								left: 0;
								right: 0;
								bottom: -$h;
							}

							.guide-bottom {
								width: 12px;
								height: 135px;
								z-index: -1;
								position: absolute;
								margin: auto;
								left: 0;
								right: 0;
								top: -$h;
								transform: rotate(180deg);
							}
						}
					}

					.thorn-details {
						margin-left: 20px;
						border-left: 1px solid #e2eaff;
						padding: 10px 18px;
						max-width: calc(680px - 195px);
						width: fit-content;
						max-height: 180px;
						overflow-y: auto;

						.thorn-details-item {
							@include flex-start();
							width: fit-content;
							height: 17px;
							line-height: 17px;
							font-size: 12px;
							color: #575757;
							cursor: pointer;

							:hover {
								color: #409eff;
								text-decoration: underline;
							}

							.thorn-details-item-circ {
								width: 8px;
								height: 8px;
								/*background: #ffc201;*/
								border-radius: 100%;
								margin-right: 10px;
							}

							.task-text {
								@include flex-1();
							}

							.icon-warning {
								margin-left: 5px;
								width: 18px;
								height: 18px;
								border-radius: 100%;
								overflow: hidden;
							}

							.icon-tips {
								margin-left: 10px;
								font-size: 12px;
							}
						}

						.thorn-details-item + .thorn-details-item {
							margin-top: 10px;
						}
					}
				}
			}
		}
	}

	.h-box-right {
		@include space-between();
		margin-top: 20px;
		width: 100%;

		&:nth-of-type(1) {
			margin-top: 0;
		}
	}

	.temp-list {
		padding: 10px 0;
		margin-top: 10px;
		align-self: flex-start;
		color: #f56c6c;
	}

	.task-box {
		width: 100%;
		@include space-between();
		padding-left: 20px;
	}

	.r-v {
		width: 100%;
		height: auto;
	}
</style>
